<template>
	<view class="register">
		<u-notify ref="uNotify" message=""></u-notify>
		<u-modal :show="modalvariate.modalshow" :title="modalvariate.modaltitle" :content='modalvariate.modalcontent'
			@confirm="modalConfirm"></u-modal>
		<view class="content">
			<!-- 主体 -->
			<view class="main">
				<u-form ref="forgotPwdForm" :model="forgotPwdModel" :rules="forgotPwdRules" errorType="border-bottom">
					<u-form-item prop="forgotPwdInfo.email" borderBottom labelWidth="130rpx" label="邮箱" ref="item1">
						<wInput v-model="forgotPwdModel.forgotPwdInfo.email" type="text" placeholder="邮箱" :focus="true">
						</wInput>
					</u-form-item>
					<u-form-item prop="forgotPwdInfo.password" borderBottom labelWidth="130rpx" label="新密码" ref="item2">
						<wInput v-model="forgotPwdModel.forgotPwdInfo.password" type="password" placeholder="新密码"
							isShowPass>
						</wInput>
					</u-form-item>
					<u-form-item prop="forgotPwdInfo.verificationcode" borderBottom labelWidth="130rpx" label="重置码"
						ref="item3">
						<wInput v-model="forgotPwdModel.forgotPwdInfo.verificationcode" type="text"
							placeholder="重置码有效期30分钟" codeText="获取重置码" setTime="190" isShowCode ref="runCode"
							@setCode="getVerCode()">
						</wInput>
					</u-form-item>
				</u-form>
			</view>

			<wButton @click="clickResetPasswords" class="wbutton" text="重置密码"></wButton>
		</view>
	</view>
</template>

<script>
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {
		emailVerificationCodeApi,
		emailRetrievePasswdApi
	} from '@/api/users.js'
	export default {
		name: 'Forget',
		components: {
			wInput,
			wButton,
		},
		data() {
			//u-modal 弹出层使用的变量
			const modalvariate = {
				modalshow: false,
				modaltitle: '',
				modalcontent: ''
			}
			//找回密码表单
			const forgotPwdModel = {
				forgotPwdInfo: {
					email: "",
					password: '',
					verificationcode: '',
					verificationkey: ''
				}
			}
			//找回密码表单验证
			const forgotPwdRules = {
				'forgotPwdInfo.email': {
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
							.test(value)
					},
					message: '邮箱格式不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				},
				'forgotPwdInfo.password': {
					type: 'string',
					required: true,
					min: 6,
					max: 16,
					message: '请填写密码6至16位',
					trigger: ['blur', 'change']
				},
				'forgotPwdInfo.verificationcode': {
					type: 'string',
					required: true,
					message: '请填写邮箱验证码',
					trigger: ['blur', 'change']
				}
			}
			return {
				modalvariate,
				forgotPwdModel,
				forgotPwdRules
			}
		},
		methods: {
			//获取重置码事件
			getVerCode() {
				if (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
					.test(this.forgotPwdModel.forgotPwdInfo.email)) {
					this.forgotPwdModel.forgotPwdInfo.verificationkey = Math.random().toString(36).substring(2)
					const emaildata = {
						email: this.forgotPwdModel.forgotPwdInfo.email,
						key: this.forgotPwdModel.forgotPwdInfo.verificationkey
					}
					emailVerificationCodeApi(emaildata).then(res => {
						if (res.code === 1) {
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								message: '邮箱验证码发送成功,有效期30分钟',
								safeAreaInsetTop: false
							})
							this.$refs.runCode.$emit('runCode');
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: res.msg,
								safeAreaInsetTop: false
							})
						}
					})

				} else {
					uni.$u.toast('请输入正确的邮箱')
				}
			},
			clickResetPasswords(){
				this.$refs.forgotPwdForm.setRules(this.forgotPwdRules)
				this.$refs.forgotPwdForm.validate().then(res => {		
					emailRetrievePasswdApi(this.forgotPwdModel.forgotPwdInfo).then(res => {
						if (res.code === 1) {
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								message: '密码修改成功,稍后将返回登录界面',
								safeAreaInsetTop: false
							})
							setTimeout(function(){
							    uni.switchTab({
							    	url: '/pages/mycenter/mycenter'
							    })
							}, 2000)
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: res.msg,
								safeAreaInsetTop: false
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.forgotPwdForm.setRules(this.forgotPwdRules)
		}
	}
</script>

<style>
	@import url("@/common/css/icon.css");
	@import url("@/common/css/main.css");
</style>